<template>
    <div>
        <h3>需求： 列举出三种垂直居中的方案，用代码实现</h3>

        <div class="box1">
            <div class="item1"></div>
        </div>

        <div class="box2">
            <div class="item2"></div>
        </div>

        <div class="box3">
            <div class="item3"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Interview2"
    }
</script>

<style scoped>
    .box1 {
        width: 100%;
        height: 200px;
        background: #333;
        /*方案1：父容器为弹性盒子，align-item为垂直居中*/
        display: flex;
        align-items: center;
    }
    .item1 {
        width: 200px;
        height: 100px;
        background: #ccff7a;
    }

    .box2 {
        width: 100%;
        height: 200px;
        background: #333;
        margin: 50px 0;
        /*方案2 ：子绝父相对，子元素使用定位实现(三种写法)*/
        position: relative;
    }
    .item2 {
        width: 200px;
        height: 100px;
        background: #ff3533;
        position: absolute;
        /*top: 50%;
        margin-top: -50px;*/

       /* top: 50%;
        transform: translateY(-50%);*/

       /* top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;*/
    }


    .box3 {
        width: 100%;
        height: 200px;
        background: #333;
        margin: 50px 0;
        /*方案3 ： 父容器为网格布局*/
        display: grid;
        align-content: center;
    }
    .item3 {
        width: 200px;
        height: 100px;
        background: #32efff;
    }
</style>